<template>
    <div class="container">
        <div class="header">
            <div class="back" @click="goHome">
                <i class="el-icon-back"></i>
            </div>

            <div style="display: flex;">
                <el-select v-model="value" clearable placeholder="分类" @change="pitch" @clear="empty">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>

                <el-input placeholder="输入关键字搜索" v-model="keyword" class="searcher" @keyup.enter.native="findCourse">
                    <el-button slot="append" @click="findCourse" style="color: #cceabb;font-size: 18px;">
                        <i class="el-icon-search"></i>
                    </el-button>
                </el-input>
            </div>
            <UserAcatar @transfer="change" />
        </div>
        <div class="content">
            <!-- 添加课程页面 -->
            <div class="courses" v-if="courseList.length == 0"
                style="display: flex;justify-content: center;align-items: center;color: #ccc;">
                <span>暂无课程</span>
            </div>
            <div class="courses" v-else>
                <div class="course" v-for="(item, i) in courseList" :key="item.course_id + i">
                    <div style="position: relative;width: 200px;height: 120px;border-radius: 10px;cursor: pointer;"
                        @click="goDetail(item)">
                        <div class="mask"
                            style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.4);z-index: 999;border-radius: 10px;display: flex;align-items: center;justify-content: center;color: #fff;">
                            <span v-if="new Date(item.end_date) < new Date()">
                                课程已结束
                            </span>
                            <span v-if="new Date(item.end_date) > new Date() && new Date(item.start_date) < new Date()">
                                课程进行中
                            </span>
                            <span
                                v-if="new Date(item.apply_end_date) < new Date() && new Date(item.start_date) > new Date()">
                                报名截止
                            </span>
                        </div>
                        <div class="imgbox">
                            <i v-if="!item.course_image" class="el-icon-picture-outline"></i>
                            <el-image v-else class="img" :src="item.course_image" fit="cover" />
                        </div>
                    </div>
                    <div class="operate">
                        <el-popover placement="top-start" width="180" trigger="hover" :content="item.course_name">
                            <span slot="reference"
                                style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 160px;display: inline-block;"
                                v-if="new Date() > new Date(item.apply_end_date)">
                                {{ item.course_name }}
                            </span>
                        </el-popover>
                        <el-popover placement="top-start" width="180" trigger="hover" :content="item.course_name">
                            <span slot="reference"
                                style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100px;display: inline-block;"
                                v-if="new Date(item.apply_start_date) < new Date() && new Date() < new Date(item.apply_end_date)">
                                {{ item.course_name }}
                            </span>
                        </el-popover>
                        <el-button type="success" plain size="mini" @click="apply(item)"
                            v-if="!item.apply && new Date(item.apply_start_date) < new Date() && new Date() < new Date(item.apply_end_date)">
                            报名
                        </el-button>
                        <el-button type="info" plain size="mini" @click="apply(item)"
                            v-if="item.apply && new Date(item.apply_start_date) < new Date() && new Date() < new Date(item.apply_end_date)">
                            已报名
                        </el-button>
                    </div>
                </div>
            </div>

            <!-- 分页 -->
            <div class="block">
                <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pageSize"
                    layout="total, prev, pager, next" :total="total">
                </el-pagination>
            </div>

        </div>
    </div>
</template>
  
<script>
import UserAcatar from "@/components/UserAcatar.vue";
export default {
    name: 'MyCourse',
    components: {
        UserAcatar
    },
    data() {
        return {
            userInfo: {},
            keyword: "",
            total: 100,
            pageSize: 8,
            currentPage: 1,
            courseList: [],
            options: [
                {
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }
            ],
            value: '',
        }
    },
    methods: {
        // 将头像组件中的路由再传递给homeview
        change(msg) {
            this.$emit("transfer", msg);
        },
        // 获取数据库数据
        async gitCourse() {
            let res = await this.$axios.post('/mycourse/gitcourse', { currentPage: this.currentPage, id: this.userInfo.student_id, institute_id: this.userInfo.institute_id })
            console.log(res);
            if (res.code == 200) {
                this.total = res.total
                this.courseList = res.list.map(item => {
                    if (item.course_image) {
                        return { ...item, course_image: `http://localhost:3000/image/getcourseimage/${encodeURIComponent(item.course_image)}` }
                    }
                    else {
                        return item
                    }
                })
            }
        },
        // 年级分类
        async getGrade() {
            let res = await this.$axios.post('/mycourse/getgrade', { institute_id: this.userInfo.institute_id })
            console.log(res);
            if (res.code == 200) {
                this.options = res.list.map(item => {
                    return { label: item.grade_name, value: item.grade_id }
                })
            }
            console.log(this.options);
        },
        // 选中年级
        async pitch(val) {
            if (val) {
                console.log(val)
                console.log(this.value)
                let res = await this.$axios.post('mycourse/selectcoursebygradeid', { grade_id: val, currentPage: this.currentPage, id: this.userInfo.student_id })
                console.log(res);
                if (res.code == 200) {
                    this.total = res.total
                    this.courseList = res.List.map(item => {
                        if (item.course_image) {
                            return { ...item, course_image: `http://localhost:3000/image/getcourseimage/${encodeURIComponent(item.course_image)}` }
                        }
                        else {
                            return item
                        }
                    })
                }
            }
        },
        // 取消选中分类
        async empty() {
            console.log(this.value);
            await this.gitCourse()
        },
        // 去首页
        goHome() {
            let path = ''
            if (this.userInfo.user_auth == 'teacher_per') {
                path = '/home/teachercourse'
            }
            if (this.userInfo.user_auth == 'student_per') {
                path = '/home/studentcourse'
            }
            this.$router.push(
                {
                    path: path,
                    // query: { id: keyPath[0] }
                }
            )
            this.$emit("transfer", path);
        },
        // 去详情页
        goDetail(item) {
            console.log(item);
            this.$router.push(
                {
                    path: '/home/detail',
                    query: { institute_id: item.institute_id, grade_id: item.grade_id, course_id: item.course_id, teacher_id: item.teacher_id }
                }
            )
        },
        // 报名
        async apply(item) {
            console.log(item);
            let res = await this.$axios.post('mycourse/apply', { course_id: item.course_id, student_id: this.userInfo.student_id, course_num: item.course_num })
            console.log(res);
            if (res.code == 200) {
                this.$message({
                    message: res.msg,
                    type: 'success'
                });
                await this.gitCourse()
            } else {
                this.$message.warning(res.msg)
            }
        },
        // 搜索
        async findCourse() {
            if (this.keyword == '') {
                if (this.value == '') {
                    await this.gitCourse()
                    this.$message.error('请输入关键字进行查找!')
                } else {
                    let res = await this.$axios.post('mycourse/selectcoursebygradeid', { grade_id: this.value, currentPage: this.currentPage, id: this.userInfo.student_id })
                    console.log(res);
                    if (res.code == 200) {
                        this.total = res.total
                        this.courseList = res.List.map(item => {
                            if (item.course_image) {
                                return { ...item, course_image: `http://localhost:3000/image/getcourseimage/${encodeURIComponent(item.course_image)}` }
                            }
                            else {
                                return item
                            }
                        })
                    }
                    // this.$message.error('请输入关键字进行查找!')
                }
            }
            else {
                let res = await this.$axios.post('/mycourse/findcourse', { keyword: this.keyword, currentPage: this.currentPage, grade_id: this.value, id: this.userInfo.student_id })
                console.log(res);
                if (res.code == 200) {
                    this.total = res.total;
                    this.courseList = res.List.map(item => {
                        if (item.course_image) {
                            return { ...item, course_image: `http://localhost:3000/image/getcourseimage/${encodeURIComponent(item.course_image)}` }
                        }
                        else {
                            return item
                        }
                    });
                    if (res.total == 0) {
                        this.$message.error(res.msg)
                    } else {
                        this.$message.success(res.msg)
                    }
                    this.keyword = '';
                }
            }
        },
        // 
        async handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val
            if (this.value == '') {
                await this.gitCourse()
            } else {
                await this.findCourse()
            }
        }
    },
    async mounted() {
        console.log(JSON.parse(JSON.stringify(this.$store.state.user_info)));
        this.userInfo = {
            ...JSON.parse(JSON.stringify(this.$store.state.user_info))
        };
        await this.gitCourse()
        await this.getGrade()
    }
}
</script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container {
    width: 98%;
    height: 98%;
    margin: 3px auto;
    opacity: 1;
    border-radius: 17px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 0px 0px rgba(168, 159, 159, 0.1), -23px 19px 65px 0px rgba(168, 159, 159, 0.1), -92px 74px 118px 0px rgba(168, 159, 159, 0.09), -208px 167px 160px 0px rgba(168, 159, 159, 0.05), -370px 297px 190px 0px rgba(168, 159, 159, 0.01), -578px 463px 207px 0px rgba(168, 159, 159, 0);
}

.header {
    width: 100%;
    height: 80px;
    border-bottom: 2px solid #bbb;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.searcher {
    width: 300px;
    margin-left: 100px;
}

.courses {
    width: 90%;
    height: 560px;
    /* border: 1px solid #000; */
    margin: 10px auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    overflow: auto;
    /* justify-content: space-around; */
    /* align-items: start; */
    /* align-content: space-around; */
}

.course {
    margin: 30px 40px;
}

.content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.imgbox {
    width: 200px;
    height: 120px;
    background-color: #ccc;
    font-size: larger;
    overflow: hidden;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img {
    height: 130px;
    border-radius: 10px;
}

.back {
    color: #cceabb;
    font-size: 26px;
    margin-left: 20px;
    cursor: pointer;
}

.operate {
    margin: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
</style>